<template>
    <div class="wrapper">
        <div style="background-color: #f4f4f4; padding: 20px 10px">
            <main>
                <div>
                    <a-tabs default-active-key="1" tab-position="left">
                        <a-tab-pane key="1" tab="我的主页">
                            <div>
                                <h2>个人信息</h2>
                                <div class="Information">
                                    <div class="Informationlist">
                                        昵称 <a href="" style="font-size: 14px">修改</a>
                                        <p>{{ info.nickname }}</p>
                                    </div>
                                    <div class="Informationlist">
                                        手机号 <a href="" style="font-size: 14px">修改</a>
                                        <p>{{ info.mobile }}</p>
                                    </div>
                                    <div class="Informationlist">
                                        密码 <a href="" style="font-size: 14px">修改</a>
                                        <p>******</p>
                                    </div>
                                    <div>
                    <span>
                      <img :src="$store.state.userInfo.avatarUrl" alt="" />
                    </span>
                                        <a-upload
                                                name="file"
                                                :multiple="true"
                                                @change="handleChange"
                                                :showUploadList="false"
                                        >
                                            <a-button><a-icon type="upload" /> 更该头像 </a-button>
                                        </a-upload>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="我的课程">
                                    Content of Tab Pane 1
                        </a-tab-pane>
                        <a-tab-pane key="3" tab="我的订单">
                                    Content of Tab Pane 2
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
import {userInfo,avatar} from "../../../api/api"
    export default {
        data() {
            return {
                info: {},
            };
        },
        methods: {
            handleChange(info) {
                // console.log(info);
                avatar(info.file.originFileObj).then((res) => {
                    this.$store.commit("change", {
                        loginFlag: true,
                        userInfo: res.userInfo,
                    });
                });
            },
        },
        created() {
            userInfo().then((res) => {
                // console.log(res);
                this.info = res.userInfo;
            });
        },
    };
</script>
<style scoped lang="less">
    header {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        height: 90px;
    }
    .tu {
        margin-right: 0;
    }
    .dl1 {
        margin-top: 40px;
    }
    .input {
        margin: 30px 50px 0 0;
    }
    main {
        background-color: #f4f4f4;
        padding-bottom: 40px;
    }
    .top {
        width: 1200px;
        margin: 0 auto;
        font-size: 16px;
        padding: 10px 0 15px;
        padding-left: 5px;
    }
    main {
        width: 1200px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
    }
    .Information {
        padding: 40px;
        font-size: 20px;
        color: #333;
        line-height: 40px;
    }
    .Informationlist {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }
    .Information img{
        width: 100px;
    }
</style>